<template>
    <ex-dialog
      width="700px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      @closeDialog="handleClose"
    >	
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <el-form-item label="是否显示：" prop="isShow">
          <el-switch
            v-model="ruleForm.isShow"
            active-text="是"
            inactive-text="否"
            active-value="1"
            inactive-value="2">
          </el-switch>
        </el-form-item>
        <el-form-item label="新增方式：" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio label="1">自定义</el-radio>
            <el-radio label="2">关联店铺</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="ruleForm.type == 2">
          <el-form-item label="足迹关联店铺:" prop="shopIdList" v-if="pathType == 'add'">
            <el-select v-model="ruleForm.shopIdList" multiple placeholder="请选择" size="small">
              <el-option v-for="item in shopList" :key="item.id" :label="item.shopName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="足迹关联店铺:" prop="shopId" v-if="pathType == 'edit'">
            <el-select v-model="ruleForm.shopId" placeholder="请选择" size="small">
              <el-option v-for="item in shopList" :key="item.id" :label="item.shopName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-if="ruleForm.type == 1">
          <el-form-item label="足迹图片：" prop="logo" ref="activityImgRef" :key="40">
            <ImageUploadMore :limit="1" :fileSize="20" @successImg="getactivityImg" :value="ruleForm.logo">
            </ImageUploadMore>
          </el-form-item>
          <el-form-item label="足迹名称:" prop="name">
              <el-input type="text" v-model="ruleForm.name" autocomplete="off" placeholder="请输入足迹名称" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="足迹定位:" prop="latLng">
            <div class="listBox">
              <el-input type="text" v-model="ruleForm.latLng" autocomplete="off" placeholder="请输入足迹定位"></el-input>
              <el-button @click="guUrl()" type="primary">获取定位</el-button>
            </div>
          </el-form-item>
          <el-form-item label="足迹详细地址:" prop="address">
            <el-input type="text" v-model="ruleForm.address" autocomplete="off" placeholder="请输入详细地址" maxlength="50"></el-input>
          </el-form-item>
        </template>
        <el-form-item label=" 足迹类型：" prop="labelList">
          <el-checkbox-group v-model="ruleForm.labelList">
            <el-checkbox v-for="(item, index) in labelList" :key="index"
              :label="item.id">{{ item.value }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
          <el-button @click="handleClose('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </ex-dialog>
  </template>
  <script>
  // components
  import Loading from '@/components/Loading/index'
  // api
  import {
    addFoot,
    editFoot,
    shopList,
    detail,
  } from "@/api/incentiveManagement/footprints"
  
  export default {
    components: {
      Loading
    },
    props: {
      visible: Boolean,
      id: String,
      pathType: String,
    },
    data() {
      
      return {
        loading: false,
        typeList: [
          {id: 1,value: '自定义'},
          {id: 2,value: '关联店铺'},
        ],
        labelList: [
          {id: '1',value: '游玩'},
          {id: '2',value: '美食'},
        ],
        shopId: '',
        shopList: [],
        title: '新增足迹',
        imgLoading: false,
          ruleForm: {
            type:'1',//足迹方式 1 自定义 2 关联店铺
            shopIdList: [],//关联店铺id列表
            shopId: '',
            address: '',//足迹地址
            latLng: '',//足迹经纬度q
            logo: '',//足迹logo
            name: '', //足迹名称
            
            isShow: '1', //是否显示 1 是 2 否
            id: '',//id
            labelList: [], //足迹类型 1 游玩 2 美食
          },
          rules: {
            shopIdList: [
              { required: true,message: '请选择',trigger: ['blur','change'] }
            ],
            address: [
              { required: true,message: '请输入足迹地址',trigger: 'blur' }
            ],
            latLng: [
              { required: true,message: '请输入足迹经纬度',trigger: 'blur' }
            ],
            logo: [
              { required: true,message: '请上传图片',trigger: ['blur','change'] }
            ],
            name: [
              { required: true,message: '请输入足迹名称',trigger: 'blur' }
            ],
            labelList: [
              { required: true,message: '请选择',trigger:  ['blur','change']  }
            ],
           
          }
      }
    },
    computed: {
     
    },
    created() {
      this.ruleForm.id = this.id  
      if(this.pathType == 'edit'){
        this.title = '编辑足迹'
        this.getDetail()
      }else{
        this.getShop()
      }
      
    },
    methods: {
      /** 获取关联列表*/
      async getShop(id) {
        var data = {
          shopId: id
        };
        await shopList(data).then((res) => {
          this.shopList = res.result
        });
      },
      //获取详情
      async getDetail(){
        var id = this.id
        await detail(id).then(res => {
          this.ruleForm = res.result
          this.shopId = res.result.shopId
          this.getShop(this.shopId)
        })
      },
       //活动图片
      getactivityImg(e) {
        this.ruleForm.logo = e
        this.$refs['activityImgRef'].clearValidate();
      },
      //新增主播
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            var data = {
            ...this.ruleForm
            }
            if(this.pathType == 'add'){
              addFoot(data).then(res => {
                setTimeout(() => {
                  this.handleClose()
                  this.$message.success('操作成功')
                  this.$emit('success')
                  this.loading = false
                }, 1000);
              }).catch(()=> {
                this.loading = false
              }).finally(() => {

              })
            }else if(this.pathType == 'edit'){
              editFoot(data).then(res => {
                setTimeout(() => {
                  this.handleClose()
                  this.$message.success('操作成功')
                  this.$emit('success')
                  this.loading = false
                }, 1000);
              }).catch(()=> {
                this.loading = false
              }).finally(() => {

              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      
      //取消
      handleClose(formName) {
        this.$emit('update:visible', false)
              // this.$refs[formName].resetFields();
      },
      //确认
      handleConfirm(){
          this.$emit('success', '你好')
      },
      handleSuccess(msg) {
        if (msg === '已拒绝') {
          var type = 'error'
        } else {
          var type = 'success'
        }
        this.$message({
          message: msg,
          type: type,
          duration: 1500,
          onClose: () => {
            this.handleClose()
            this.$emit('success')
          }
        })
      },
      guUrl(){
        window.open('https://lbs.qq.com/tool/getpoint/get-point.html', '_blank')
      },
    }
  }
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
          padding: 0 !important;
    }
      ::v-deep .ex--dialog--main {
      padding: 10px 20px !important; 
    }
  }
  ::v-deep .avatar-uploader2 .el-upload {
    width: 100% !important;
  }

  .avatar-uploader2 {
    width: 130px;
    height: 130px;
    text-align: center;
    line-height: 130px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
  }
  
  .banner_img {
    width: 130px;
    height: 130px;
  }
  .el-input{
    width: 300px;
  }
  .el-select{
    width: 70%;
  }
  </style>